<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
      <el-breadcrumb-item>晚归登记</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <h1>晚归登记</h1>
      <el-form ref="CBLref"
               :model="form"
               :rules="formRules"
               label-width="80px">
        <el-row>
          <el-col :span="11">
            <el-form-item label="姓名"
                          prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11"
                  :push="2">
            <el-form-item label="学号"
                          prop="studentNum">
              <el-input v-model="form.studentNum"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="7">
            <el-form-item label="宿舍"
                          prop="dorm">
              <el-input v-model="form.dorm"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  :push="1">
            <el-form-item label="宿舍楼宇"
                          prop="tower">
              <el-input v-model="form.tower"
                        :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7"
                  :push="2">
            <el-form-item label="晚归时间"
                          prop="time">
              <el-date-picker v-model="form.time"
                              type="datetime"
                              placeholder="选择日期时间"
                              align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="晚归事由"
                      prop="cause">
          <el-input type="textarea"
                    placeholder="请输入晚归原因"
                    v-model="form.cause"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary"
                 @click="comebacklateUp">提交</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CBlate',
  props: [''],
  data () {
    return {
      disabled: true,
      form: {
        name: '',
        studentNum: '',
        dorm: '',
        tower: window.localStorage.getItem('tower'),
        time: '',
        cause: ''
      },
      formRules: {
        studentNum: [{
          required: true,
          message: '请输入学号',
          trigger: 'blur'
        },
        {
          max: 12,
          min: 12,
          message: '学号必须是12位',
          trigger: 'blur'
        }
        ],
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        dorm: [{
          required: true,
          message: '请输入宿舍号',
          trigger: 'blur'
        }],
        time: [{
          required: true,
          message: '请输入时间',
          trigger: 'blur'
        }]
      }
    }
  },

  components: {},

  computed: {},

  created () {
    this.changeTower()
  },

  mounted () { },

  methods: {
    comebacklateUp () {
      this.$refs.CBLref.validate(async valid => {
        if (!valid) return
        const {
          data: res
        } = await this.$axios.get('/tower/CBlate', {
          params: {
            name: this.form.name,
            studentNum: this.form.studentNum,
            dorm: this.form.dorm,
            tower: this.form.tower,
            BCLtime: this.form.time,
            cause: this.form.cause
          }
        })
        console.log(res)
        if (res.code !== 0) {
          return this.message.warning(res.meta.msg)
        } else {
          this.$message({
            message: '登记成功',
            type: 'success'
          })
          this.$refs.CBLref.resetFields()
        }
      })
    },
    // 是否有修改宿舍楼宇的权限
    changeTower () {
      this.disabled = window.localStorage.getItem('role') !== 'admin'
    }
  },

  watch: {}

}
</script>

<style  scoped>
h1 {
  text-align: center;
  font-size: 1.5em;
}

.el-button {
  margin-left: 50%;
  transform: translateX(-50%);
}
</style>
